<script setup lang="ts">
// Define reactive data and props
import { ref } from 'vue'

const greeting = ref('Hello, Vue 3!')
const counter = ref<number | 1>(0)

// Define a function
function incrementCounter() {
  counter.value++
}
</script>

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="incrementCounter">
      Click me!
    </button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

<style>
.a {  color:   red }
</style>

<style lang="scss">
$font-stack: Helvetica, sans-serif;
$primary-color:   #333;

body { font: 100% $font-stack;
  color: $primary-color;
}
</style>
